<template>
  <div class="class-center-box">
    <div class="class-bar-box">
      <div class="bar-group flex-row">
        <div
          @click="faceBar()"
          :class="{'face-class':true, 'color-blue':active=='tab-container1'}"
        >{{tabText.left}}</div>
        <div
          @click="smallBar()"
          :class="{'small-class':true, 'color-blue':active=='tab-container2'}"
        >{{tabText.right}}</div>
      </div>
    </div>
    <slot name="chooseBar"></slot>
    <div class="null-box"></div>
    <mt-tab-container v-model="active">
      <mt-tab-container-item id="tab-container1">
            <slot name="container1"></slot>
      </mt-tab-container-item>
      <mt-tab-container-item id="tab-container2">
            <slot name="container2"></slot>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
// import Card from "@/components/card";
export default {
  data() {
    return {
      active: "tab-container1"
    };
  },
  props:['tabText'],
  methods: {
    faceBar() {
      this.active = "tab-container1";
      this.$emit('setTeaType',0)
    },
    smallBar() {
      this.active = "tab-container2";
      this.$emit('setTeaType',1)
    }
  }
};
</script>
<style lang="less">
@import url('~@/pagecss/public.less');
 .class-bar-box {
    padding: 5px 0;
    background-color: #ffffff;
    .bar-group {
      justify-content: center;
      font-size: 29/75rem;

      .face-class,
      .small-class {
        width: 178/75rem;
        padding: 3px 0;
        text-align: center;
        border: 1px solid #4787E3;
        box-sizing: border-box;
      }

      .face-class {
        border-radius: 28/75rem 0 0 28/75rem;
      }

      .small-class {
        border-radius: 0 28/75rem 28/75rem 0;
      }

      .color-blue {
        color: #ffffff;
        background-color: #4787E3;
      }

      .color-white {
        color: #4787E3;
        background-color: #ffffff;
      }
    }

  }
  .action-sheet {
  position: fixed;
  left: 0;
  right: 0;
  padding: 0 30/75rem;
  height: 41px;
  line-height: 41px;
  border-bottom: 0.5px solid rgba(227, 227, 227, 1);
  background-color: #eeeeee;
  z-index: 999;
  .action-text {
    font-size: 30/75rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
  }
}
</style>